<template>
	<view class="warp">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		
		<view style="width: 100%;display: flex;justify-content: space-between; box-sizing: border-box;padding: 12rpx 16rpx;align-items: center;" >
			<view style="display: flex;justify-content: space-between;align-items: center; box-sizing: border-box;">
				<view style="width: 72rpx;" @click="goBack">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon-white.svg"></image>
				</view>
			</view>
			<view>
				<view style="font-size: 32rpx;color: #FFF;margin-left: 16rpx;font-weight: 500;">訂單詳情</view>
			</view>
			<view style="display: flex;justify-content: flex-end;box-sizing: border-box;">
				<view @click="openServiceFn" style="display: flex;align-items: center;justify-content: center;" >
					<image
						src="/static/images/icon/kefu.svg"
						style="width:44rpx;height: 44rpx;"
					></image>
				</view>
				<view @click="openReportFn" style="display: flex;align-items: center;justify-content: center;margin:0 18rpx 0 36rpx;">
					<image
						src="/static/images/icon/waring.svg"
						style="width:44rpx;height: 44rpx;"
					></image>
				</view>
			</view>
		</view>
		
		<view>
			<view>
				<view style="margin-top: 64rpx;">
					<view style="display: flex;justify-content: center;align-items: center;width: 100%;box-sizing: border-box;">
						<view v-if="statusCard.icon">
							<u-image
								:src="statusCard.icon"
								width="48rpx"
								height="48rpx"
							></u-image>
						</view>
						<view style="color: #FFF;font-size: 40rpx;">{{ statusCard.title }}</view>
					</view>
					<view style="display: flex;justify-content: center;align-items: center;width: 100%;box-sizing: border-box;margin-top: 24rpx;">
						<view style="color: #FFF;font-size: 24rpx;">{{ statusCard.tips }}</view>
						<view style="margin-left: 12rpx;">
							<u-image
								v-if="statusCard.showWaring"
								src="/static/images/icon/waring-cirle.svg"
								width="32rpx"
								height="32rpx"
							></u-image>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="acceptOption.showAccep" style="margin-top: 56rpx;width: 100%;padding: 0 24rpx;box-sizing: border-box;">
				<view v-if="acceptOption.type == 1" style="background-color: #FFF;border-radius:24rpx;display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
					<view style="display: flex;justify-content: flex-start;align-items: center;width: 70%;">
						<u-image
							:src="acceptOption.icon"
							width="48rpx"
							height="48rpx"
						></u-image>
						<view style="font-size: 28rpx;color: #232426;font-weight: 500;margin-left: 16rpx;">{{ acceptOption.title }}</view>
					</view>
					<view style="display: flex;justify-content: flex-end;align-items: center;">
						<view @click="refund" style="border-radius: 50%;border: 1rpx solid #6A707C;background-color: #FFF;padding: 20rpx;">
							<u-icon name="close" :bold="true" color="#6A707C" size="20rpx"></u-icon>
						</view>
						<view @click="accept" style="border-radius: 50%;border: 1rpx solid #27C5D6;background-color: #27C5D6;padding: 20rpx;margin-left: 16rpx;">
							<u-icon name="checkmark"  color="#ffffff" size="20rpx"></u-icon>
						</view>
					</view>
				</view>
				<view v-else-if="acceptOption.type == 2" style="background-color: #FFF;border-radius:24rpx;display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
					<view style="display: flex;justify-content: flex-start;align-items: center;width: 60%;">
						<u-image
							:src="acceptOption.icon"
							width="48rpx"
							height="48rpx"
						></u-image>
						<view style="font-size: 28rpx;color: #232426;font-weight: 500;margin-left: 16rpx;">{{ acceptOption.title }}</view>
					</view>
					<view style="display: flex;justify-content: flex-end;align-items: center;">
						<view v-if="acceptOption.status == 1" @click="start" style="border-radius: 200rpx;border: 1rpx solid #27C5D6;background-color: #27C5D6;padding:18rpx 40rpx;display: flex;justify-content: center;align-items: center;">
							<u-icon name="checkmark"  color="#ffffff" size="28rpx"></u-icon>
							<view style="color: #FFF;font-size: 28rpx;margin-left: 16rpx;">開始訂單</view>
						</view>
						<view v-else style="border-radius: 200rpx;border: 1rpx solid #E5E6E8;background-color: #F6F8FA;padding:18rpx 40rpx;display: flex;justify-content: center;align-items: center;">
							<u-icon name="checkmark"  color="#BEC0C5" size="28rpx"></u-icon>
							<view style="color: #BEC0C5;font-size: 28rpx;margin-left: 16rpx;">開始訂單</view>
						</view>
					</view>
				</view>
				<view v-else-if="acceptOption.type == 3" style="background-color: #FFF;border-radius:24rpx;display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
					<view @click="goRating" style="width: 100%;display: flex;align-items: center;justify-content: space-between; ">
						<view style="border: 2rpx solid #E5E6E8;border-radius: 56rpx;background-color: #F6F8FA;color: #BEC0C5;font-size: 24rpx;padding: 8rpx 24rpx;width: 450rpx;">
							對於此訂單,留下評價...
						</view>
						<view style="border: 2rpx solid #27C5D6;color: #27C5D6;font-size: 28rpx;padding: 8rpx 40rpx;border-radius: 200rpx;">
							評價
						</view>
					</view>
				</view>
				<view v-if="acceptOption.type == 4" style="background-color: #FFF;border-radius:24rpx;display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
					<view style="display: flex;justify-content: flex-start;align-items: center;width: 55%;">
						<u-image
							:src="acceptOption.icon"
							width="48rpx"
							height="48rpx"
						></u-image>
						<view style="font-size: 28rpx;color: #232426;font-weight: 500;margin-left: 16rpx;">{{ acceptOption.title }}</view>
					</view>
					<view style="display: flex;justify-content: flex-end;align-items: center;">
						<view @click="refund" style="border-radius: 50%;border: 1rpx solid #6A707C;background-color: #FFF;padding: 20rpx;">
							<u-icon name="close" :bold="true" color="#6A707C" size="20rpx"></u-icon>
						</view>
						<view @click="finish" style="border-radius: 200rpx;border: 1rpx solid #27C5D6;background-color: #27C5D6;padding:14rpx 40rpx;display: flex;justify-content: center;align-items: center;margin-left: 14rpx;">
							<u-icon name="checkmark"  color="#ffffff" size="28rpx"></u-icon>
							<view style="color: #FFF;font-size: 28rpx;margin-left: 16rpx;">已完成</view>
						</view>
					</view>
				</view>
				<view v-if="acceptOption.type == 5" style="background-color: #FFF;border-radius:24rpx;display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
					<view style="display: flex;justify-content: flex-start;align-items: center;width: 70%;">
						<u-image
							:src="acceptOption.icon"
							width="48rpx"
							height="48rpx"
						></u-image>
						<view style="font-size: 28rpx;color: #232426;font-weight: 500;margin-left: 16rpx;">{{ acceptOption.title }}</view>
					</view>
					<view style="display: flex;justify-content: flex-end;align-items: center;">
						<view @click="pay" style="border-radius: 200rpx;border: 1rpx solid #27C5D6;background-color: #27C5D6;padding:18rpx 40rpx;color: #FFF;font-size: 28rpx;">
							<view>去付款</view>
						</view>
					</view>
				</view>
				<view v-else>
					
				</view>
			</view>
			
			<view v-show="mapOption.showMap" style="margin-top: 24rpx;width: 100%;padding: 0 24rpx;box-sizing: border-box;">
				<view style="background-color: #FFF;border-radius:24rpx;display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
					<view style="display: flex;justify-content: flex-start;align-items: center;width: 80%;">
						<u-image
							src="/static/images/icon/map.svg"
							width="48rpx"
							height="48rpx"
						></u-image>
						<view style="margin-left: 16rpx;">
							<view style="font-size: 24rpx;color: #808690;">服務地址</view>
							<view style="font-size: 28rpx;color: #232426;font-weight: 500;">{{ mapOption.address }}</view>
						</view>
					</view>
					<view style="text-align: right;" @click="navigateToGoogleMap">
						<view style="color: #27C5D6;font-size: 24rpx;font-weight: 500;">開啟地圖</view>
					</view>
				</view>
			</view>
			
			
			<view style="margin-top: 24rpx;width: 100%;padding: 0 24rpx;box-sizing: border-box;">
				<view style="background-color: #FFF;border-radius:24rpx;box-sizing: border-box;">
					<view style="padding: 24rpx 0;">
						<u-steps :current="0" activeColor="#27C5D6">
							<u-steps-item 
								v-for="(item, index) in stepList" 
								:key="index" 
								:title="item.title" 
								iconSize="64"
								direction="row"
							>
								<view v-if="item.status == 4" slot="icon" style="border-radius: 50%;border: 1rpx solid #27C5D6;background-color: #27C5D6;padding: 12rpx;">
									<u-icon name="checkmark"  color="#ffffff" size="20rpx"></u-icon>
								</view>
								<view v-else-if="item.status == 3" slot="icon" style="border-radius: 50%;border: 1rpx solid #FFA514;background-color: #FFA514;padding: 12rpx;">
									<u-icon name="error" color="#ffffff" size="20rpx"></u-icon>
								</view>
								<view v-else-if="item.status == 2" slot="icon" style="border-radius: 50%;border: 2rpx solid #27C5D6;background-color: #FFF;padding: 18rpx;">
									<view style="width: 10rpx;height: 10rpx;border-radius: 50%;background-color: #27C5D6;"></view>
								</view>
								<view v-else slot="icon" style="border-radius: 50%;border: 1rpx solid #E5E6E8;background-color: #FFF;width: 48rpx;height: 48rpx;">
									
								</view>
							</u-steps-item>
						</u-steps>
					</view>
					<view class="line"></view>
					<view style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
						<view style="display: flex;justify-content: flex-start;align-items: center;">
							<view>
								<u-image
									:src="detail.cover"
									width="68rpx"
									height="80rpx"
									radius="20rpx"
								></u-image>
							</view>
							<view style="width: 500rpx; color: #232426;font-weight: 500;font-size: 28rpx;margin-left: 20rpx;">
								{{ detail.title }}
							</view>
						</view>
						<view>
							<u-image
								src="/static/images/icon/right-icon-2.png"
								width="36rpx"
								height="36rpx"
							></u-image>
						</view>
					</view>
					<view class="line"></view>
					<view style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
						<view>
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">{{ detail.nicktitle }}</view>
						</view>
						<view style="display: flex;justify-content: flex-end;align-items: center;">
							<view style="color: #27C5D6;font-size: 28rpx;">{{ detail.nickname }}</view>
							<view style="color: #F67914;background-color: #FFF0D8;font-size: 20rpx;padding:2rpx 10rpx;border-radius: 52rpx;margin-left: 12rpx;">{{ detail.rate }}</view>
						</view>
					</view>
					<view class="line"></view>
					<view style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
						<view>
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">類型</view>
						</view>
						<view>
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">
								{{ detail.serviceTypeStr }}
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
						<view>
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">預約時間</view>
						</view>
						<view>
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">{{ detail.appointment_time }}</view>
						</view>
					</view>
					<view v-if="detail.unit == 3 && detail.status == 0 && detail.uid == uid">
						<view class="line"></view>
						<view  style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
							<view>
								<view style="color: #232426;font-weight: 500;font-size: 28rpx;">服務完成日</view>
							</view>
							<view style="display: flex;justify-content: flex-end;align-items: center;">
								<view style="color: #232426;font-weight: 500;font-size: 28rpx;">{{ detail.serviceEndTime }}</view>
								<view @click="openEndTimeFn()">
									<u-icon name="edit-pen"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view style="margin-top: 24rpx;width: 100%;padding: 0 24rpx;box-sizing: border-box;">
				<view style="background-color: #FFF;border-radius:24rpx;box-sizing: border-box;">
					<view style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
						<view>
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">訂單編號</view>
						</view>
						<view style="display: flex;justify-content: flex-end;align-items: center;">
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">{{ detail.order_number }}</view>
							<view @click="copyCode">
								<u-image
									src="/static/images/icon/copy.svg"
									width="36rpx"
									height="36rpx"
								></u-image>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
						<view>
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">狀態</view>
						</view>
						<view>
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">{{ detail.order_status_str }}</view>
						</view>
					</view>
					<view class="line"></view>
					<view v-if="detail.start_image">
						<view style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
							<view>
								<view style="color: #232426;font-weight: 500;font-size: 28rpx;">開始證明</view>
							</view>
							<view>
								<view style="display: flex;justify-content: flex-end;align-items: center;gap: 16rpx;">
									<u-image
										:src="detail.start_image"
										width="46rpx"
										height="46rpx"
									></u-image>
									<u-image
										src="/static/images/icon/eyes.png"
										width="42rpx"
										height="42rpx"
									></u-image>
								</view>
							</view>
						</view>
						<view class="line"></view>
					</view>
					<view v-if="detail.paytime" style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
						<view>
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">成立時間</view>
						</view>
						<view>
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">{{detail.created_at}}</view>
						</view>
					</view>
					<view class="line"></view>
					<view style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;">
						<view>
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">訂單金額</view>
						</view>
						<view style="display: flex;justify-content: flex-end;align-items: center;">
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">NT$ {{detail.amount}}</view>
							<view @click="pricePopup = true" v-if="detail.unit == 3 && detail.status == 0 && detail.uid == uid">
								<u-icon name="edit-pen"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="detail.remark" style="margin-top: 24rpx;width: 100%;padding: 0 24rpx;box-sizing: border-box;">
				<view style="background-color: #FFF;border-radius:24rpx;box-sizing: border-box;">
					<view style="display: flex;justify-content: flex-start;align-items: center;padding: 24rpx;">
						<view>
							<view style="color: #232426;font-weight: 500;font-size: 28rpx;">備註</view>
						</view>
					</view>
					<view class="line"></view>
					<view style="display: flex;justify-content: flex-start;align-items: center;padding: 24rpx;">
						<view>
							<view style="color: #808690;font-weight: 500;font-size: 28rpx;">{{ detail.remark }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-tools" v-if="bottomOption.showBottom">
			
			<!--私訊-->
			<view v-if="bottomOption.type == 1">
				<view @click="chat" class="btn btn-info">
					私訊客戶
				</view>
			</view>
			<view v-else-if="bottomOption.type == 2" class="tools-between">
				<view @click="cancel" class="btn-half btn-defaule">
					取消訂單
				</view>
				<view @click="pay" class="btn-half btn-info">
					付款
				</view>
			</view>
			<view v-else-if="bottomOption.type == 3">
				<view @click="start" class="btn btn-success">
					開始訂單
				</view>
			</view>
			<view v-else-if="bottomOption.type == 4" class="tools-center">
				<view @click="goRating" class="btn btn-info">
					填寫評價
				</view>
			</view>
			<view v-else-if="bottomOption.type == 5" class="tools-between">
				<view @click="cancel" class="btn-half btn-defaule">
					取消訂單
				</view>
				<view class="btn-half btn-info">
					私訊 OR 達人
				</view>
			</view>
			<view v-else-if="bottomOption.type == 6" class="tools-between">
				<view class="btn-half btn-info">
					私訊 OR 達人
				</view>
				<view @click="finish" class="btn-half btn-success">
					完成訂單
				</view>
			</view>
			<view v-else>
				
			</view>
		</view>
		
		 <u-datetime-picker
				:show="endTimePicker"
				v-model="endTime"
				mode="date"
				:minDate="Number(new Date())"
				confirmColor="#27C5D6"
				@confirm="setEndTimeFn"
				@cancel="closeEndTimeFn"
				@close="closeEndTimeFn"
		></u-datetime-picker>
		
		<u-popup 
			:show="pricePopup" 
			@close="closePricePopup" 
			@open="openPricePopup"
			round="48rpx"
		>
			<view style="width: 100%;padding: 20rpx 40rpx;box-sizing: border-box;">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view style="color: #808690;font-size: 32rpx;" @click="closePricePopup">取消</view>
					<view style="color: #232426;font-size: 30rpx;font-weight: 500;">訂單金額</view>
					<view style="color: #27C5D6;font-size: 32rpx;" @click="savePricePopup">儲存</view>
				</view>
				<view style="display: flex;justify-content: flex-start;align-items: center;margin:56rpx 0;">
					<view style="color: #232426;font-size: 40rpx;margin-right: 24rpx;">NT$</view>
					<view style="width: 100%;border: 2rpx solid #E5E6E8;border-radius: 24rpx;padding: 18rpx 24rpx;">
						<u-input
							v-model="editPrice"
							border="none"
						></u-input>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!--確認訂單結-->
		<u-popup :show="showOrderDetails" round="48rpx" mode="bottom" @close="showOrderDetails=false" @open="showOrderDetails=true">
			<view style="display: flex;justify-content: space-between;align-items: center; padding: 0 40rpx;margin-top: 28rpx;">
				<view style="width: 120rpx;"></view>
				<view style="width: 120rpx;color: #232426;font-size: 30rpx;font-weight: 600;">確認訂單</view>
				<view style="width: 120rpx;display: flex;justify-content: flex-end;" @click="showOrderDetails=false">
					<u-image
						src="/static/images/icon/close.svg"
						width="60rpx"
						height="60rpx"
					></u-image>
				</view>
			</view>
			<view class="popup-order-details">
				<view class="popup-order-start">
					<view>
						<u-image
							:src="detail.cover"
							width="68rpx"
							height="80rpx"
							radius="20rpx"
						></u-image>
					</view>
					<view class="popup-order-title" style="margin-left: 20rpx;">
						{{detail.title}}
					</view>
				</view>
				<view class="popup-order-between popup-order-item">
					<view class="popup-order-title">時間</view>
					<view class="popup-order-title">{{detail.appointment_time}}</view>
				</view>
				<view class="popup-order-between popup-order-item">
					<view class="popup-order-title">服務方式</view>
					<view class="popup-order-title">{{detail.serviceTypeStr}}</view>
				</view>
				<view class="popup-order-between popup-order-item" style="display: none;">
					<view class="popup-order-title">支付方式</view>
					<view class="popup-order-title">信用卡</view>
				</view>
				<view class="popup-order-line"></view>
				<view class="popup-order-between popup-order-item">
					<view class="popup-order-title">主要費用</view>
					<view class="popup-order-subtitle">NT$ {{formattedSubtotal}}</view>
				</view>
				<view class="popup-order-between popup-order-item">
					<view class="popup-order-between">
						<view class="popup-order-title">平台服務費</view>
						<view style="margin-left: 16rpx;" @click="showTipsFn">
							<u-image
								src="/static/images/icon/warning-circle.png"
								width="36rpx"
								height="36rpx"
							></u-image>
						</view>
					</view>
					<view class="popup-order-subtitle">{{ fee * 100 }}%</view>
				</view>
				<view class="popup-order-between popup-order-item">
					<view class="popup-order-title">總金額</view>
					<view class="popup-order-subtitle">NT$ {{formattedTotal}}</view>
				</view>
				<view class="popup-order-protocol">
					<view class="popup-order-start">
						<u-checkbox-group v-model="agreeProtocol">
							<u-checkbox name="agree" shape="circle" activeColor="#27C5D6" inactiveColor="#E5E6E8" size="36rpx" iconSize="32rpx" iconColor="#FFF"></u-checkbox>
						</u-checkbox-group>
						<view @click="toggleAgreeProtocol" style="font-size: 24rpx;color: #232426;">
							我已閱讀且同意《
						</view>
						<view @click="showContent" style="margin-left: 6rpx;font-size: 24rpx;color: #232426;border-bottom:2rpx solid #232426;">
							Only Rent 用戶協議
						</view>
						<view style="margin-left: 6rpx;font-size: 24rpx;color: #232426;">
							》
						</view>
					</view>
				</view>
				<view class="popup-order-protocol">
					<view @click="goPay" style="border-radius: 200rpx;background-color:#27C5D6;color: #FFF;text-align: center; ">
						<view style="padding:32rpx 200rpx;gap: 12rpx;font-size: 28rpx;">去付款</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!--確認訂單結束-->
		
		<!--服务费說明-->
		<u-popup :show="showTips" round="48rpx" mode="bottom" @close="closeTipsFn" @open="showTipsFn">
			<view style="display: flex;justify-content: space-between;align-items: center; padding: 0 40rpx;margin-top: 28rpx;">
				<view style="width: 120rpx;"></view>
				<view style="width: 180rpx;color: #232426;font-size: 30rpx;font-weight: 600;">服务费說明</view>
				<view style="width: 120rpx;display: flex;justify-content: flex-end;" @click="closeTipsFn">
					<u-image
						src="/static/images/icon/close.svg"
						width="60rpx"
						height="60rpx"
					></u-image>
				</view>
		    </view>
			<view style="margin: 56rpx 0;padding:0 40rpx;font-size: 28rpx;color: #232426;">
				平台將收取訂單金額的 {{ fee * 100 }}% 作為服務費，用於支付交易處理、系統維護、安全風控及客戶服務等相關運營成本，請確認後再提交申請。
			</view>
		</u-popup>
		<!--服务费說明結束-->
		
		<!-- 檢舉組件 -->
		<report-popup
			:show="showReport"
			:targetId="targetUserId"
			:targetType="'user'"
			@close="showReport = false"
		></report-popup>
		
	</view>
</template>

<script>
	
	import { orderDetail, confirmOrder, refuseOrder, cancelOrder, startOrder, finishOrder, editOrder, createChat, getConfig, createdEcPay, goPay, ceshiOrder } from '@/config/api.js';
	import ReportPopup from '@/components/report-popup.vue';
	import { openLineApp } from '@/utils/openApp.js';
	
	export default {
		data() {
			return {
				id:0,
				uid:0,//當前登錄用戶id
				statusCard:{
					icon:'',//loading.svg,calendar.png
					title:'',
					tips:'',
					showWaring:false
				},
				acceptOption:{
					type:1,//1询问接受,2开始,3评价,4完成,5付款
					icon:'',//calendar.png/wallet_active.png/task_circle.png
					title:'',
					showAccep:false,
					status:1
				},
				mapOption:{
					latitude:'',
					longitude:'',
					address:'',
					showMap:false,
				},
				stepList:[
					{title:'成立',status:1},
					{title:'待確認',status:1},
					{title:'進行中',status:1},
					{title:'評價',status:1}
				],
				bottomOption:{
					//1私訊2開始(未到時間)3開始4評價5取消,私訊6私訊,完成
					type:1,
					showBottom:false
				},
				detail: {
					id:'',
					uid:'',
					type:'',
					order_number:'',//訂單id
					fuid:'',//cms uid
					fid:'',//cms id
					title:'',//cms id
					cover:'',
					remark:'',
					unit:'',
					nums:'',
					amount:'',//訂單金額
					travel_fee:'',//手續費
					total:'',//需支付金額
					payamount:'',//實際支付
					paytype:'',//支付方式
					paytime:'',//支付時間
					status:'',
					status_str :'',
					order_status :'',
					order_status_str:'',
					appointment_time:'',
					address:'',
					latLon:'',
					userid:'',
					nicktitle:'',
					nickname:'',
					rate:'',
					serviceTypeStr:'',
					serviceEndTime:'',
					created_at:''
				},
				endTime:'',
				endTimePicker:false,
				pricePopup:false,
				editPrice:0,
				serviceImg:'',//開始服務圖片
				timer:null,
				showReport: false,
				targetUserId: '123456', // 被檢舉用戶的ID
				showOrderDetails: false,
				agreeProtocol: [],
				fee: 0,
				showTips:false,
				_isActivated:false,
				pollInterval: null
			}
		},
		components:{
			ReportPopup
		},
		computed:{
			formattedSubtotal() {
				const amount = parseFloat(this.detail.amount) || 0;
				return this.formatCurrency(amount)
			},
			formattedTotal() {
				const amount = parseFloat(this.detail.amount) || 0;
				const total = amount + amount * this.fee;
				return this.formatCurrency(total)
			}
		},
		onLoad(option) {
			// console.log(option)
			this.order_number = option.order_number;
			uni.showLoading({
				title: 'Loading'
			})
			this.getOrderDetail();
			this.getConfig();
			this._isActivated = true
			this.uid = uni.getStorageSync('userId');
		},
		onShow() {
			// 只有当页面已经加载过且处于激活状态时才启动轮询
			if (this._isActivated) {
			    this.startPolling()
			}
		},  
		onHide() {
		    this.stopPolling()
		},
		onUnload() {
		    this._isActivated = false
		    this.stopPolling()
		    // 清理数据，防止内存泄漏
		    this.roomId = null
		},
		methods:{
			stopPolling() {
				if (this.pollInterval) {
					clearInterval(this.pollInterval)
					this.pollInterval = null
					console.log('停止輪詢')
				}
			},
			startPolling() {
				this.stopPolling() // 先停止现有的轮询
				
				// 检查页面状态
				if (!this._isActivated ) {
					console.log('页面未激活，不启动轮询')
					return
				}
				
				// 每3秒轮询一次新消息
				this.pollInterval = setInterval(() => {
					// 再次检查页面状态
					if (this._isActivated) {
						this.getOrderDetail()
					}
				}, 5000)
			  
				console.log('开始轮询消息')
			},
			goBack(){
				// 先停止轮询，再导航
				this._isActivated = false
				this.stopPolling()
				uni.switchTab({
					url:'/pages/home/index'
				})
			},
			copyCode(){
				uni.setClipboardData({
					data: this.detail.order_number,
					success: function () {
						uni.showToast({
							title:'複製成功',
							icon:'none'
						})
					}
				});
			},
			getOrderDetail(){
				let that = this;
				// uni.showLoading();
				
				orderDetail({order_number:this.order_number}).then((res) => {
					//success
					console.log(res)
					that.id = res.id;
					that.detail = res;
					//設置狀態
					that.setOrderStatus(that.detail);
					
				}).catch(() =>{
					
				})
				uni.hideLoading();
			},
			setOrderStatus(data){
				/**
				 * data.uid(訂單下單人的uid)
				 * 1. user_id(下單) != local_uid,channel_id = 1,我接的單(技能,工作訂單)
				 * 2. user_id(下單) != local_uid,channel_id = 2,我搶的單(任務,工作訂單)
				 * 3. user_id(下單) == local_uid,channel_id = 2,我的任務(任務,消費訂單)
				 * 4. user_id(下單) == local_uid,channel_id = 1,我的預約(技能,消費訂單)
				 */
				//判斷訂單類型
				if( data.type == 1 ){
					//技能訂單
					if( this.uid == data.uid ){
						//我的預約(消費訂單)
						console.log('消費訂單,我的預約');
						this.setTypeReservation(data)
						//設置進度條
						this.setStep(3,data.service_status,data.unit)
					} else {
						//我接的單(工作訂單)
						console.log('工作訂單,我接的單(技能)');
						this.setTypeSkills(data);
						//設置進度條
						this.setStep(1,data.service_status,data.unit)
					}
				} else {
					//任務訂單
					if( this.uid == data.uid ){
						//我搶的單(工作訂單)
						console.log('工作訂單,我搶的單(任務)');
						this.setTypeMyTask(data);
						//設置進度條
						this.setStep(2,data.service_status,data.unit)
					} else {
						//消費訂單,我的任務 type 4
						console.log('消費訂單,我的任務');
						this.setTypeTask(data);
						//設置進度條
						this.setStep(4,data.service_status,data.unit)
					}
				}
				
				//顯示預約地址
				// if( data.service_status == 1 || data.service_status == 2 ){
				// 	if( data.type == 1 ){
				// 		//到府
				// 		let addr = '';
				// 		if( data.service_status > 1 ){
				// 			addr = data.address;
				// 		} else {
				// 			//未接單,隱層部分地址
				// 			addr = this.truncateString(data.address);
				// 		}
				// 		this.mapOption.address = addr;
				// 		// this.setNavigation(data.customer_map)
				// 		this.mapOption.latitude = data.latitude;
				// 		this.mapOption.longitude = data.longitude;
				// 	} else if( data.type == 2 ){
				// 		//到店
				// 		this.mapOption.address = data.address;
				// 		// this.setNavigation(data.snapshot.cms.latitude_longitude)
				// 		this.mapOption.latitude = data.latitude;
				// 		this.mapOption.longitude = data.longitude;
				// 	} else {
				// 		//綫上
				// 		this.mapOption = false;
				// 	}
					
				// 	this.mapOption.showMap = true;
				// } else {
				// 	this.mapOption.showMap = false;
				// }
				if( data.service_type == 1 ){
					//到府
					let addr = '';
					if( data.service_status > 1 ){
						addr = data.address;
					} else {
						//未接單,隱層部分地址
						addr = this.truncateString(data.address);
					}
					this.mapOption.address = addr;
					// this.setNavigation(data.customer_map)
					this.mapOption.latitude = data.latitude;
					this.mapOption.longitude = data.longitude;
				} else if(data.service_type == 2){
					//到店
					this.mapOption.address = data.address;
					// this.setNavigation(data.snapshot.cms.latitude_longitude)
					this.mapOption.latitude = data.latitude;
					this.mapOption.longitude = data.longitude;
				} else {
					this.mapOption.showMap = false;
				}
			},
			//設置工作訂單我接的單(技能) type1
			setTypeSkills(data){
				
				//1.設置狀態卡,2.設置操作條,3設置導航地址,4.設置步驟條
				if(data.service_status == 0){
					//待付款
					this.setStatusCard('', '待付款', '等待對方付款,訂單即將成立');
					this.setAcceptOption(false);
					
					this.setBottomOption(1);
				} else if( data.service_status == 1 ){
					//待確認
					//1.設置狀態提示卡片
					let tips = '請在 ' + data.refuseDeadline + '前回復';
					this.setStatusCard('loading', '等待您確認', tips);
					
					//2設置操作條
					this.setAcceptOption(true, 1, 'expert', '是否接受此筆訂單?');
					
					//5.設置底部操作欄
					this.setBottomOption(1);
				} else if( data.service_status == 2 ){
					//1.未到時間,2已到時間,3服務中
					// 預約時間转换为Date对象
					const targetTime = new Date(data.appointment_time);
					// 获取当前时间
					const currentTime = new Date();
					
					if( targetTime.getTime() > currentTime.getTime() ){
						//未到預約時間
						let tips = '預約時間: ' + data.appointment_time;
						this.setStatusCard('calendar','依約定時間進行服務',tips);
						this.setAcceptOption(true, 2, 'expert', '開始訂單時，請點擊');
						
						this.setBottomOption(1);
					} else {
						//已到預約時間,未開始服務
						let tips = '預約時間: ' + data.appointment_time;
						this.setStatusCard('calendar', '依約定時間進行服務', tips);
						this.setAcceptOption(true, 2, 'expert', '開始訂單時，請點擊');
						this.setBottomOption(3);
						
					}
				} else if(data.service_status == 3){
					//服務中
					this.setStatusCard('', '服務正在進行中...', '');
					this.setAcceptOption(false);
					
					this.setBottomOption(1);
				} else if(data.service_status == 4){
					//待評價
					this.setStatusCard('', '太棒了,訂單已完成!', '款項將撥入您的錢包 別忘了留下評價哦');
					this.setAcceptOption(true, 3, '', '');
					this.setBottomOption(4);
				} else if(data.service_status == 5) {
					//已完成
					this.setStatusCard('loading', '已完成', '款項已匯入錢包');
					this.setAcceptOption(false);
					
					//5.設置底部操作欄
					this.setBottomOption(false);
				} else {
					//取消
					//1.設置狀態提示卡片
					this.setStatusCard('', '訂單已取消', '您已婉拒此訂單，若有疑問請聯絡客服');
					this.setAcceptOption(false);
					
					this.setBottomOption(1);
				}
			},
			//設置工作訂單我搶的單(任務) type2
			setTypeMyTask(data){
				//1.設置狀態卡,2.設置操作條,3設置導航地址,4.設置步驟條
				if(data.service_status == 0){
					//待支付
					let tips = '將在 ' + data.refuseDeadline + '前收到回復';
					this.setStatusCard('loading', '等待對方付款', tips);
					
					//2設置操作條
					this.setAcceptOption(false);
					
					//5.設置底部操作欄
					this.setBottomOption(1);
				} else if( data.service_status == 1 ){
					//待確認
					//1.設置狀態提示卡片
					let tips = '將在 ' + data.refuseDeadline + '前收到回復';
					this.setStatusCard('loading', '等待對方確認', tips);
					
					//2設置操作條
					this.setAcceptOption(false);
					
					//5.設置底部操作欄
					this.setBottomOption(1);
				} else if( data.service_status == 2 ){
					//1.未到時間,2已到時間,3服務中
					// 預約時間转换为Date对象
					const targetTime = new Date(data.appointment_time);
					// 获取当前时间
					const currentTime = new Date();
					
					if( targetTime.getTime() > currentTime.getTime() ){
						//未到預約時間
						let tips = '預約時間: ' + data.appointment_time;
						this.setStatusCard('calendar','依約定時間進行服務',tips);
						this.setAcceptOption(true, 2, 'task', '開始訂單時，請點擊',2);
						
						this.setBottomOption(1);
					} else {
						//已到預約時間, 未開始服務
						let tips = '預約時間: ' + data.appointment_time;
						this.setStatusCard('calendar', '依約定時間進行服務', tips);
						this.setAcceptOption(true, 2, 'task', '開始訂單時，請點擊',1);
						this.setBottomOption(3);
					}
					
				} else if(data.service_status == 3){
					//已經開始服務
					this.setStatusCard('', '服務正在進行中...', '');
					this.setAcceptOption(false);
					
					this.setBottomOption(1);
				} else if(data.service_status == 4){
					//待評價
					this.setStatusCard('', '太棒了,訂單已完成!', '款項將撥入您的錢包 別忘了留下評價哦');
					this.setAcceptOption(true, 3, '', '');
					this.setBottomOption(4);
				} else if(data.service_status == 5) {
					//已完成
					this.setStatusCard('loading', '已完成', '款項已匯入錢包');
					this.setAcceptOption(false);
					
					//5.設置底部操作欄
					this.setBottomOption(false);
				} else {
					//取消
					//1.設置狀態提示卡片
					this.setStatusCard('', '訂單已取消', '搶單失敗，客戶未接受此訂單');
					this.setAcceptOption(false);
					
					this.setBottomOption(1);
				}
			},
			//設置消費訂單我的預約(技能) type 3
			setTypeReservation(data){
				if( data.service_status == 0 ){
					//待付款
					let deadlineTime = data.refuseDeadline;
					let tips = '請在 ' + deadlineTime + '前回復';
					let title = '請於'+ deadlineTime +'前完成付款';
					this.setStatusCard('', '等待您的付款，訂單即將成立', tips);
					this.setAcceptOption(true, 5, 'wallet', title);
					this.setBottomOption(2);
				} else if( data.service_status == 1 ){
					//待確認
					//1.設置狀態提示卡片
					let tips = '將在 ' + data.refuseDeadline + '前收到回復';
					this.setStatusCard('loading', '等待對方確認', tips);
					this.setAcceptOption(false);
					this.setBottomOption(5);
				} else if( data.service_status == 2 ){
					//1.未到時間,2已到時間,3服務中
					// 預約時間转换为Date对象
					const targetTime = new Date(data.appointment_time);
					// 获取当前时间
					const currentTime = new Date();
					
					if( targetTime.getTime() > currentTime.getTime() ){
						//未到預約時間
						let tips = '預約時間: ' + data.appointment_time;
						this.setStatusCard('','耐心等待,預約時間將至',tips);
						this.setAcceptOption(false);
						this.setBottomOption(5);
					} else {
						//已到預約時間, 未開始服務
						let tips = '預約時間: ' + data.appointment_time;
						this.setStatusCard('','耐心等待,預約時間將至',tips);
						this.setAcceptOption(false);
						this.setBottomOption(5);
						
					}
					//5.設置底部操作欄
					this.bottomOption.showBottom = true;
					
				} else if(data.service_status == 3){
					//已經開始服務
					this.setStatusCard('', '服務正在進行中...', '');
					this.setAcceptOption(true, 4, 'expert', '服務完成了嗎');
					this.setBottomOption(6);
				} else if(data.service_status == 4){
					//待評價
					this.setStatusCard('', '太棒了,訂單已完成!', '服務還滿意嗎？ 別忘了為達人留下評價哦');
					this.setAcceptOption(true, 3, '', '');
					
					//5.設置底部操作欄
					this.setBottomOption(4)
				} else if(data.service_status == 5) {
					//已完成
					this.setStatusCard('', '已完成', '評價已完成，期待下一次相遇！');
					this.setAcceptOption(false);
					
					//5.設置底部操作欄
					this.setBottomOption(false);
				} else {
					//取消
					//1.設置狀態提示卡片
					this.setStatusCard('', '訂單已取消', '訂單回覆已過期，達人未接受此訂單');
					this.setAcceptOption(false);
					
					//5.設置底部操作欄
					this.setBottomOption(1);
				}
			},
			//設置消費訂單我的任務(任務)
			setTypeTask(data){
				if(data.service_status == 0){
					//待付款
					let deadlineTime = data.refuseDeadline;
					let tips = '請在 ' + deadlineTime + '前回復';
					let title = '請於'+ deadlineTime +'前完成付款';
					this.setStatusCard('', '等待您的付款，訂單即將成立', tips);
					this.setAcceptOption(true, 5, 'wallet', title);
					this.setBottomOption(2);
				} else if( data.service_status == 1 ){
					//待確認
					//1.設置狀態提示卡片
					let tips = '請在 ' + data.refuseDeadline + '前回復';
					let title = '是否接受'+data.nickname+'的申請';
					this.setStatusCard('loading', '等待您確認', tips);
					this.setAcceptOption(true, 1, 'task', title);
					this.setBottomOption(5);
				} else if( data.service_status == 2 ){
					//1.未到時間,2已到時間,3服務中
					// 預約時間转换为Date对象
					const targetTime = new Date(data.appointment_time);
					// 获取当前时间
					const currentTime = new Date();
					
					if( targetTime.getTime() > currentTime.getTime() ){
						//未到預約時間
						let tips = '預約時間: ' + data.appointment_time;
						this.setStatusCard('','耐心等待, 預約時間將至',tips);
						this.setAcceptOption(false);
						this.setBottomOption(5);
					} else {
						//已到預約時間, 未開始服務
						let tips = '預約時間: ' + data.appointment_time;
						this.setStatusCard('','耐心等待, 預約時間將至',tips);
						this.setAcceptOption(false);
						this.setBottomOption(5);
					}
					//5.設置底部操作欄
					this.bottomOption.showBottom = true;
					
				} else if(data.service_status == 3){
					//已經開始服務
					this.setStatusCard('', '服務正在進行中...', '');
					this.setAcceptOption(true, 4, 'task', '服務完成了嗎');
					this.setBottomOption(6);
				} else if(data.service_status == 4){
					//待評價
					this.setStatusCard('', '太棒了,訂單已完成!', '');
					this.setAcceptOption(true, 3, '', '');
					
					//5.設置底部操作欄
					this.setBottomOption(4)
				} else if(data.service_status == 5) {
					//已完成
					this.setStatusCard('', '已完成', '評價已完成，期待下一次相遇！');
					this.setAcceptOption(false);
					
					//5.設置底部操作欄
					this.setBottomOption(false);
				} else {
					//取消
					//1.設置狀態提示卡片
					this.setStatusCard('', '訂單已取消', '訂單回覆已過期，達人未接受此訂單');
					this.setAcceptOption(false);
					
					//5.設置底部操作欄
					this.setBottomOption(1);
				}
			},
			//設置狀態卡片
			setStatusCard(icon, title, tips, showWaring = false){
				let url = '/static/images/icon/';
				if( icon == 'loading' ){
					url += 'loading.svg';
				} else if(icon == 'calendar') {
					url += 'calendar.svg';
				} else {
					url = '';
				}
				
				this.statusCard.icon = url;
				this.statusCard.title = title;
				this.statusCard.tips = tips;
				this.showWaring = showWaring;
			},
			//設置操作條
			setAcceptOption(showAccep, type=1 ,icon = '',title = '',status=1){
				let url = '/static/images/icon/';
				if(icon == 'expert'){
					url += 'expert_circle.png';
				} else if(icon == 'calendar'){
					url += 'calendar.svg';
				} else if(icon == 'wallet'){
					url += 'wallet_active.png';
				} else if(icon == 'task') {
					url += 'task_circle.png';
					
				} else {
					url = ''
				}
				
				this.acceptOption.type = type;
				this.acceptOption.icon = url;
				this.acceptOption.title = title;
				this.acceptOption.showAccep = showAccep;
				this.acceptOption.status = status;
			},
			//設置底欄
			setBottomOption(type){
				if( type == false ){
					this.bottomOption.showBottom = false;
					return;
				}
				this.bottomOption.type = type;
				this.bottomOption.showBottom = true;
			},
			//設置導航(121.7863,47.7656)
			setNavigation(gps){
				if(!gps){
					return;
				}
				//設置導航地址
				const coordinateStr = gps;
				const [latitude, longitude] = coordinateStr.split(',').map(Number);
				this.mapOption.latitude = latitude;
				this.mapOption.longitude = longitude;
				console.log('經緯度', latitude, longitude);//输出:經緯度
			},
			//時間戳轉標準時間格式
			TransToTime(timestamp){
				const date = new Date(timestamp * 1000);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				
				return `${year}/${month}/${day} ${hours}:${minutes}`;
			},
			//截取地址
			truncateString(str, maxLength = 15) {
			    if (typeof str !== 'string') return '';
			    if (str.length <= maxLength) return str;
			    return str.substring(0, maxLength) + '...(部分隱藏)';
			},
			//設置步驟條
			setStep(type,order_status,unit){
				console.log('setStep', type)
				let steps = [];
				//設置步驟條内容
				if( type == 1 ){
					//我接的單(技能,工作訂單)
					if(unit == 3){
						steps = [
							{title:'待確認'},
							{title:'付款'},
							{title:'進行中'},
							{title:'評價'}
						]
					} else {
						steps = [
							{title:'付款'},
							{title:'待確認'},
							{title:'進行中'},
							{title:'評價'}
						]
					}
				} else if(type == 2){
					//我搶的單(任務,工作訂單)
					steps = [
						{title:'成立'},
						{title:'對方確認'},
						{title:'進行中'},
						{title:'評價'}
					]
				} else if(type == 3){
					//我的預約(技能,消費訂單)
					if(unit == 3){
						steps = [
							{title:'待確認'},
							{title:'付款'},
							{title:'進行中'},
							{title:'評價'}
						]
					} else {
						steps = [
							{title:'對方確認'},
							{title:'付款'},
							{title:'進行中'},
							{title:'評價'}
						]
					}
				} else {
					//我的任務(任務,消費訂單)
					steps = [
						{title:'待確認'},
						{title:'待付款'},
						{title:'進行中'},
						{title:'評價'}
					]
				}
				
				//2.判斷當前步驟
				if(type == 1 || type == 4){
					//消費訂單
					if( order_status == 4 ){
						//完成
						steps[3].status = 4;
						steps[2].status = 4;
						steps[1].status = 4;
						steps[0].status = 4;
					} else if(order_status == 3){
						//待評價
						steps[3].status = 2;
						steps[2].status = 4;
						steps[1].status = 4;
						steps[0].status = 4;
					} else if(order_status == 2){
						//進行中
						steps[3].status = 1;
						steps[2].status = 2;
						steps[1].status = 4;
						steps[0].status = 4;
					} else if(order_status == 1){
						//待確認
						steps[3].status = 1;
						steps[2].status = 1;
						steps[1].status = 2;
						steps[0].status = 4;
					} else if(order_status == 0){
						//待支付
						steps[3].status = 1;
						steps[2].status = 1;
						steps[1].status = 2;
						steps[0].status = 4;
					} else {
						//取消(待約定)
						steps[3].status = 1;
						steps[2].status = 1;
						steps[1].status = 1;
						steps[0].status = 3;
					}
				} else {
					if( order_status == 4 ){
						//完成
						steps[3].status = 4;
						steps[2].status = 4;
						steps[1].status = 4;
						steps[0].status = 4;
					} else if(order_status == 3){
						//待評價
						steps[3].status = 2;
						steps[2].status = 4;
						steps[1].status = 4;
						steps[0].status = 4;
					} else if(order_status == 2){
						//進行中
						steps[3].status = 1;
						steps[2].status = 2;
						steps[1].status = 4;
						steps[0].status = 4;
					} else if(order_status == 0 || order_status == 1){
						//待確認
						steps[3].status = 1;
						steps[2].status = 1;
						steps[1].status = 2;
						steps[0].status = 4;
					} else {
						//取消(待約定)
						steps[3].status = 1;
						steps[2].status = 1;
						steps[1].status = 1;
						steps[0].status = 3;
					}
				}
				this.stepList = steps;
			},
			//打開支付
			pay(){
				this.showOrderDetails = true;
			},
			goPay(){
				// 检查是否同意协议
				if (!this.agreeProtocol.includes('agree')) {
					uni.showToast({
						title: '請同意用戶協議',
						icon: 'none'
					});
					return;
				}
				
				let that = this;
				let order_number = this.detail.order_number;
				
				// 调用支付接口
				uni.showLoading({
					title: '支付跳轉中...'
				});
				
				// #ifdef H5
				// web端測試跳轉
				that.testH5Pay(order_number);
				// #endif
				  
				// #ifdef APP-PLUS
				that.getPayToken(order_number);//APP端跳轉支付
				// #endif
			},
			testH5Pay(order_number){
				let that = this;
				let parames = {
					order_number:order_number
				}
				ceshiOrder(parames).then((res) => {
					uni.redirectTo({
						url: '/pages/order/result?order_number='+order_number
					});
				}).catch(() => {})
			},
			getPayToken(order_number){
				createdEcPay({order_number: order_number}).then((res) => {
					let token_ = res.data.Token;
					
					uni.navigateTo({
						url:'/pages/index/index',
						events: {
							acceptData: (data) => {
								console.log('接收付款patoken:', data);
								that.payOrder(order_number, data.payToken)
							}
						},
						success: (res) => {
							uni.hideLoading();
							res.eventChannel.emit('initData', { 
								order_number: order_number,
								token: token_
							});
						}
					});
				}).catch((e) => {
					console.log('error', e);
					uni.hideLoading();
				});
			},
			// 新增：支付订单
			payOrder(number, token){
				let that = this;
				let parames = {
					order_number: number,
					pay_token: token,
				}
				
				uni.showLoading({
					title:'支付中...'
				});
				
				goPay(parames).then((res) => {
					uni.hideLoading();
					uni.redirectTo({
						url: '/pages/order/result?order_number=' + number
					});
				}).catch((e) => {
					console.log('error', e);
					uni.hideLoading();
				});
			},
			
			// 新增：获取平台服务费
			getConfig(){
				let that = this;
				let parames = {
					type:'fee'
				}
				getConfig({data:parames}).then((res) => {
					that.fee = res
				}).catch(() => {})
			},
			showTipsFn(){
				this.showTips = true;
				this.showOrderDetails = false;
			},
			closeTipsFn(){
				this.showTips = false;
				this.showOrderDetails = true;
			},
			// 新增：显示用户协议
			showContent(){
				uni.navigateTo({
					url:'/pages/index/content?type=agreement'
				})
			},
			
			// 新增：切换协议同意状态
			toggleAgreeProtocol() {
				if (this.agreeProtocol.includes('agree')) {
					this.agreeProtocol = [];
				} else {
					this.agreeProtocol = ['agree'];
				}
			},
			
			// 新增：格式化金额
			formatCurrency(num) {
				// 确保输入是数字
				const number = typeof num === 'number' ? num : parseFloat(num) || 0;
				return number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
			},
			//接受訂單
			accept(){
				let that = this;
				uni.showModal({
					title: '是否接受此筆訂單？',
					content: '接受後，請依約定時間進行服務',
					confirmColor:'#27C5D6',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.submitAccept()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//提交接受
			submitAccept(){
				let that = this;
				let data = {
					id:this.detail.id
				}
				
				confirmOrder(data).then((res) => {
					//success
					console.log( res )
					uni.showToast({
						icon:'none',
						title:'訂單已接受'
					})
					that.getOrderDetail();
				}).catch(() =>{
					
				})
			},
			
			//取消訂單
			cancel(){
				let that = this;
				uni.showModal({
					title: '是否取消此筆訂單？',
					content: '取消訂單將無法恢復，且會影響您的評價',
					confirmText:'取消訂單',
					confirmColor:'#27C5D6',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.submitCancel()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//提交取消
			submitCancel(){
				let data = {
					id:this.detail.id
				}
				cancelOrder(data).then((res) => {
					//success
					console.log( res )
					
				}).catch(() =>{
					
				})
			},
			//拒絕訂單
			refuse(){
				let that = this;
				uni.showModal({
					title: '是否婉拒此筆訂單？',
					content: '婉拒訂單將無法恢復，且會影響您的評價',
					confirmText:'婉拒訂單',
					confirmColor:'#27C5D6',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.submitRefuse()//拒绝
							that.submitRefund()//退款
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//提交拒絕
			submitRefuse(){
				let data = {
					id:this.detail.id
				}
				refuseOrder(data).then((res) => {
					//success
					console.log( res )
					
				}).catch(() =>{
					
				})
			},
			
			//開始訂單
			start(){
				let that = this;
				uni.showModal({
					title: '是否開始服務？',
					content: '開始服務',
					confirmText:'立即開始',
					confirmColor:'#27C5D6',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							// that.submitStart()
							that.startCamera()
							// const ctx = uni.createCameraContext();
							// ctx.takePhoto({
							// 	quality: 'high',
							// 	success: (res) => {
							// 		this.src = res.tempImagePath
							// 	}
							// });
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//开始订单拍照
			startCamera(){
				let that = this;
				let uploadUrl = uni.$u.http.config.baseURL+'/api/home/upload'
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: uploadUrl,
							header: {
							    'Authorization': 'Bearer ' + uni.getStorageSync('token')// 从全局获取token
							},
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'type': 'order',
								'timestamp': Date.now()
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								console.log(res)
								that.serviceImg = res.fullurl;
								that.submitStart();
							}
						});
					}
				});
			},
			//提交開始訂單
			submitStart(){
				let that = this;
				let data = {
					id:this.detail.id,
					image:this.serviceImg
				}
				startOrder(data).then((res) => {
					//success
					console.log( res )
					uni.showToast({
						icon:'none',
						title:'訂單已開始',
					})
					that.getOrderDetail();
				}).catch(() =>{
					
				})
			},
			finish(){
				let that = this;
				uni.showModal({
					title: '确认订单已完成？',
					content: '訂單确认后將無法恢復',
					confirmText:'完成訂單',
					confirmColor:'#27C5D6',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.submitFinish()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			submitFinish(){
				let that = this;
				let data = {
					id:this.detail.id
				}
				finishOrder(data).then((res) => {
					//success
					console.log( res )
					uni.showToast({
						icon:'none',
						title:'服務已完成'
					})
					that.getOrderDetail();
				}).catch(() =>{
					
				})
			},
			//填寫評價
			goRating(){
				uni.navigateTo({
					url:'/pages/order/evaluate?id='+this.id
				})
			},
			navigateToGoogleMap() {
				let latitude  = this.mapOption.latitude;
				let longitude = this.mapOption.longitude;
				if(!latitude || !longitude){
					uni.showToast({
						icon:'none',
						title:'暫未設置導航地址'
					})
					return;
				}
				
				// 构造Google Maps URL
				const url = `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}&travelmode=driving&dir_action=navigate`;
			  
				// 尝试跳转
				plus.runtime.openURL(url, function(err) {
					if(err) {
						uni.showToast({
							title: '未检测到Google地图应用',
							icon: 'none'
						});
						// 备用方案：打开网页版
						plus.runtime.openWeb(url);
					}
				});
			},
			openEndTimeFn(){
				this.stopPolling();
				this.endTimePicker = true;
			},
			closeEndTimeFn(){
				this.endTimePicker = false;
				this.startPolling();
			},
			setEndTimeFn(e){
				const dayTime = new Date(e.value);
				const end = `${dayTime.getFullYear()}-${(dayTime.getMonth()+1).toString().padStart(2, '0')}-${dayTime.getDate().toString().padStart(2, '0')}`;
				// this.detail.serviceEndTime = end;
				this.endTimePicker = false;
				this.submitEndTime(end)
			},
			submitEndTime(endTime){
				let that = this;
				let data = {
					order_id:this.detail.id,
					end_time:endTime
				}
				editOrder(data).then((res) => {
					//success
					console.log( res )
					that.detail.serviceEndTime = res;
					uni.showToast({
						icon:'none',
						title:'修改完成'
					})
				}).catch(() =>{
					
				})
				that.startPolling();
			},
			openPricePopup(){
				this.editPrice = this.detail.amount;
			},
			closePricePopup(){
				this.editPrice = this.detail.amount;
				this.pricePopup = false;
			},
			savePricePopup(){
				this.detail.amount = this.editPrice;
				this.pricePopup = false;
				this.submitPrice(this.editPrice)
			},
			submitPrice(price){
				let that = this;
				let data = {
					order_id:this.detail.id,
					amount:price
				}
				editOrder(data).then((res) => {
					//success
					console.log( res )
					that.detail.amount = price;
					uni.showToast({
						icon:'none',
						title:'修改完成'
					})
				}).catch(() =>{
					
				})
			},
			chat( ){
				let that = this;
				let category = that.detail.type == 1?'expert':'task';
				let data = {
					category:category,
					target_user_id:that.detail.userid
				}
				createChat(data).then((res) => {
					//success
					console.log(res)
					uni.navigateTo({
						url: '/pages/my/chatTalk?roomId='+res.id,
						success: res => {},
						fail: () => {},
						complete: (res) => {
							console.log(res)
						}
					});
					
				}).catch(() =>{
					
				})
			},
			openServiceFn(){
				openLineApp()
			},
			openReportFn(){
				console.log('sss')
				this.showReport = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
.warp{
	width: 100%;
	min-height: 100vh;
	background: linear-gradient( 180deg, #27C5D6 15%, #F6F8FA 60%);
	padding-bottom: 160rpx;
	
	.slot-icon{
		
	}
	/* 修改标题文字大小 */
	::v-deep .u-steps-item__title {
	  font-size: 48rpx !important;
	}
	.line{
		width: 100%;
		background-color: #F4F6F7;
		height: 2rpx;
	}
	.bottom-tools{
		position:fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-top: 2rpx solid #F4F6F7;
		text-align: center;
		
		.tools-center{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.tools-between{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.btn{
			width:700rpx;
			height: 70rpx;
			margin: 30rpx auto;
			font-size: 28rpx;
			line-height: 70rpx;
		}
		.btn-half{
			width:350rpx;
			height: 70rpx;
			margin: 30rpx auto;
			font-size: 28rpx;
			line-height: 70rpx;
		}
		
		.btn-info{
			border:2rpx solid #27C5D6;
			border-radius: 200rpx;
			color: #27C5D6;
		}
		.btn-success{
			border:2rpx solid #27C5D6;
			border-radius: 200rpx;
			background-color: #27C5D6;
			color: #FFF;
		}
		.btn-defaule{
			border:2rpx solid #E5E6E8;
			border-radius: 200rpx;
			background-color: #FFF;
			color: #232426;
		}
	}
	//确认订单弹窗样式
	.popup-order-details{
		margin: 56rpx 0;
		padding:0 40rpx;
		
		.popup-order-start{
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.popup-order-between{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.popup-order-item{
			margin: 20rpx 0;
		}
		.popup-order-title{
			font-size: 28rpx;
			color: #232426;
			font-weight: 500;
		}
		.popup-order-subtitle{
			font-size: 28rpx;
			color: #1AAEC0;
			font-weight: 500;
		}
		.popup-order-line{
			width: 100%;
			height: 2rpx;
			background-color: #F4F6F7;
			margin: 24rpx 0;
		}
		.popup-order-protocol{
			margin: 56rpx 0;
		}
	}
}
</style>